<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            outline: none;
        }

        .publish {
      position: relative;
            width: 500px;
            margin: 20px auto;
        }

        textarea {
            width: 500px;
            height: 300px;
            padding: 20px;
            font-size: 20px;
            resize: none;
            box-sizing: border-box;
        }

        .submit-1 {
            margin: 20px 0;
            overflow: hidden;
        }

        .submit-1 p {
            float: left;
        }

        .submit-1 button {
            float: right;
            width: 80px;
            height: 30px;
            background-color: #fff;
        }

        .container-no {
            display: none;
        }

        .container {
            display: block;
            overflow: hidden;
            width: 500px;
            border: 1px solid #000;
            box-sizing: border-box;
            margin-top: 20px;
            margin-bottom: 20px;
            padding: 20px;

        }


        .comment span {
            float: left;
            width: 300px;
            height: 50px;
            background-color: burlywood;
        }

        .btnCollection {
            float: right;

        }

        .btnDel,
        .btnEdit {
            width: 50px;
            height: 30px;
            margin: 10px;
            background-color: #fff;
            border: 1px solid #999;
        }

        .margin-right-10 {
            margin-right: 10px;
        }


        .xiugai{
            position: absolute;
            display: none;
            width:400px;
            height: 100px;
            background-color: skyblue;
            top: 0;
           left: 0;
           
        }
     .xiugai .text-xg{
        display: inline-block;
        width: 300px;
        height: 80px;
    
     }
     .xiugai .btn-xiugai{
        float: right;
        margin-top: 20px;
        margin-right: 10px;
        width: 80px;
        height: 40px;
      
     }
  
    </style>
</head>

<body>
    <div class="publish">
        <div class="form">
            <textarea name="" id="" cols="30" rows="10" maxlength="30"></textarea>
            <div class="submit-1">
                <p>还可以输入<strong>30</strong>个字</p>
                <button class="btnSubmit">发布</button>
            </div>
        </div>

        <div class="container-no">
            <div class="comment">
                <span class="text"></span>
                <p class="btnCollection">
                    <input type="button" value="删除" class="btnDel margin-right-10">
                    <input type="button" value="修改" class="btnEdit">
                </p>
            </div>

        </div>
        <div class="xiugai">
            <textarea name="" id="" cols="30" rows="10" class="text-xg"></textarea>
            <button class="btn-xiugai">确定修改</button>
        </div>

    </div>
    <script>
        // h获取文本输入框
        var textarea = document.querySelector('textarea');
        // 还可以输入的字数
        var strong = document.querySelector('strong')
        // 设置文本框输入最大字数为30
        textarea.maxLength = 30
        // 先设置一个剩余字数的显示
        // 获取评论区的文本
        var text = document.querySelectorAll('text');



        //   设置一个字数的监听
        textarea.oninput = function () {

            textarea.value.trim();
            strong.innerText = 30 - textarea.value.length
        }

        // 点击发布之后出现评论



        // 获取发布按钮
        var btnSubmit = document.querySelector('.btnSubmit')
        console.log(btnSubmit);
        btnSubmit.onclick = function () {
            //获取comment
            var textNo = document.querySelector('.container-no .text')
            // 给评论区赋值
            textNo.innerHTML = textarea.value
            // 先克隆一个评论区 然后将最新的一个评论区放最上面
            // 获取评论区
            var containerNo = document.querySelector('.container-no');
            //   获取最外面大盒子
            var publish = document.querySelector('.publish');
            // 克隆 containerNo
            var container = publish.insertBefore(containerNo.cloneNode(1), publish.children[1])
            container.className = 'container';

            // 显示出来发表的评论，之后清除文本框中的内容
            textarea.value = ''
            // 重置还可以输入的字数
            strong.innerText = '30'
            //获取被克隆出来的评论区集合
            var container = document.querySelectorAll('.container');
            console.log(container);


            // 删除按钮
            // 获取删除按钮
            var btnDel = document.querySelector('.btnDel');
            btnDel.onclick = function () {
                publish.removeChild(btnDel.parentNode.parentNode.parentNode)
            }

            // 修改按钮
            var btnEdit = document.querySelector('.btnEdit');
            // 获取 
            var xiugai = document.querySelector('.xiugai')
            var textXg = document.querySelector('.xiugai .text-xg')
            btnEdit.onclick = function () {
                xiugai.style.display='block';
                
                textXg.innerHTML = textarea.value
                btnEdit.parentNode.parentNode
            }
        }




    </script>
</body>

</html>